<template>
  <div class="app-container">
    <div class="box">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="400px"
      >
        <el-form-item label-width="120px" label="添加人员" prop="userName" v-if="userPlus.user?.userName === 'jizhouyun'">
          <el-input
            v-model="formData.userName"
            type="text"
            placeholder=""
            clearable
            :disabled="true"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="文章标题" prop="articleTitle">
          <el-input
            v-model="formData.articleTitle"
            type="text"
            placeholder="请输入文章标题"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label-width="120px" label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            placeholder="排序"
          ></el-input-number>
        </el-form-item>

        <el-form-item label-width="120px" label="封面/分享图标" prop="titleUrl">
          <template #default="{ row }">
            <div class="flex-box">
              <div class="inp">
                <el-input
                  v-model="formData.titleUrl"
                  type="text"
                  placeholder="请输入封面/分享图标链接"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </div>
              <fileUpload
                v-model="formData.titleUrl"
                :fileType="['png', 'jpg', 'jpeg']"
                :isShowTip="false"
                :isShowList="false"
                :limit="1"
              ></fileUpload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label-width="120px" label="返回跳转链接" prop="returnUrl">
          <el-input
            v-model="formData.returnUrl"
            type="text"
            placeholder="请输入返回跳转链接"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item
          label-width="120px"
          label="背景音乐链接"
          prop="backedMusic"
        >
          <template #default="{ row }">
            <div class="flex-box">
              <div class="inp">
                <el-input
                  v-model="formData.backedMusic"
                  type="text"
                  placeholder="请输入背景音乐链接"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </div>
              <fileUpload
                v-model="formData.backedMusic"
                :fileType="['mp3']"
                :isShowTip="false"
                :isShowList="false"
                :limit="1"
              ></fileUpload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label-width="120px" label="直跳" prop="goUrl">
          <el-input
            v-model="formData.goUrl"
            type="text"
            placeholder="请输入直跳"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label-width="120px" label="顶部广告图片" prop="topImg">
          <template #default="{ row }">
            <div class="flex-box">
              <div class="inp">
                <el-input
                  v-model="formData.topImg"
                  type="text"
                  placeholder="请输入顶部广告图片"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </div>
              <fileUpload
                v-model="formData.topImg"
                :fileType="['png', 'jpg', 'jpeg']"
                :isShowTip="false"
                :isShowList="false"
                :limit="1"
              ></fileUpload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label-width="120px" label="顶部广告链接" prop="topUrl">
          <el-input
            v-model="formData.topUrl"
            type="text"
            placeholder="请输入顶部广告链接"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label-width="120px" label="底部广告图片" prop="bottomImg">
          <template #default="{ row }">
            <div class="flex-box">
              <div class="inp">
                <el-input
                  v-model="formData.bottomImg"
                  type="text"
                  placeholder="请输入底部广告图片"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </div>
              <fileUpload
                v-model="formData.bottomImg"
                :fileType="['png', 'jpg', 'jpeg']"
                :isShowTip="false"
                :isShowList="false"
                :limit="1"
              ></fileUpload>
            </div>
          </template>
        </el-form-item>

        <el-form-item label-width="120px" label="底部广告链接" prop="bottomUrl">
          <el-input
            v-model="formData.bottomUrl"
            type="text"
            placeholder="请输入底部广告链接"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label-width="120px" label="是否启用" prop="status">
          <el-switch v-model="formData.status"></el-switch>
        </el-form-item>

        <el-form-item label-width="120px" label="文章内容" prop="richText">
          <div class="rich-text">
            <vue-ueditor-wrap
              v-model="formData.richText"
              :config="editorConfig"
            ></vue-ueditor-wrap>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import fileUpload from "@/components/FileUpload/index.vue";
import { getMessage, addMessage, updateMessage } from "@/api/article/message";
import { getUser } from "@/api/system/user";
import { onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import store from "store"

const user = useUserStore();
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();

const editorConfig = ref({
  UEDITOR_HOME_URL: "/UEditor/",
  serverUrl: "https://web.carboncold.cn",
});

const formRef = ref();
const data = reactive({
  formData: {
    userName: user.name,
    articleTitle: undefined,
    sort: 1,
    titleUrl: undefined,
    returnUrl: undefined,
    backedMusic: undefined,
    goUrl: undefined,
    topImg: undefined,
    topUrl: undefined,
    bottomImg: undefined,
    bottomUrl: undefined,
    status: true,
    richText: "",
  },
  rules: {
    articleTitle: [
      {
        required: true,
        message: "请输入文章标题",
        trigger: "blur",
      },
    ],
    sort: [
      {
        required: true,
        message: "排序",
        trigger: "blur",
      },
    ],
    titleUrl: [
      {
        message:
          "请输入封面/分享图标链接封面/分享图标封面/分享图标封面/分享图标",
        trigger: "blur",
      },
    ],
    returnUrl: [
      {
        message: "请输入返回跳转链接",
        trigger: "blur",
      },
    ],
    backedMusic: [
      {
        message: "请输入背景音乐链接",
        trigger: "blur",
      },
    ],
    goUrl: [
      {
        message: "请输入直跳",
        trigger: "blur",
      },
    ],
    topImg: [
      {
        message: "请输入顶部广告图片",
        trigger: "blur",
      },
    ],
    topUrl: [
      {
        message: "请输入顶部广告链接",
        trigger: "blur",
      },
    ],
    bottomImg: [
      {
        message: "请输入底部广告图片",
        trigger: "blur",
      },
    ],
    bottomUrl: [
      {
        message: "请输入底部广告链接",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
const userPlus = ref({})

onMounted(() => {
  if (!route.query.uid) return;
  getMessage(route.query.uid).then(async (response) => {
    formData.value = response.data;
    if (
      user.roles.find((res) => res == "admin") ||
      user.roles.find((res) => res == "jizouyun")
    ) {
      console.log(response.data);

      if (!response.data.user) {
        return;
      }
      const usered = await getUser(response.data.user);
      formData.value.userName = usered.data.userName;
    } else {
      formData.value.userName = user.name;
    }
  });
  userPlus.value = store.get("user")
  console.log(userPlus.value);
  
});

/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    if (route.query.uid != null) {
      updateMessage({
        ...formData.value,
        status: formData.value.status ? "1" : "0",
        user: null,
      }).then((response) => {
        proxy.$modal.msgSuccess("修改成功");
        router.push("/article/message");
      });
    } else {
      addMessage({
        ...formData.value,
        status: formData.value.status ? "1" : "0",
        user: user.id,
        userName: user.name,
      }).then((response) => {
        proxy.$modal.msgSuccess("新增成功");
        router.push("/article/message");
      });
    }
  });
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields();
  formData.value = {
    sort: 1,
    status: true,
  };
}
</script>
<style lang="scss" scoped>
.flex-box {
  display: flex;
  width: 100%;
  .inp {
    flex: 1;
    width: 100%;
    margin-right: 10px;
  }
}

.box {
  width: 800px;
  .rich-text {
    width: 800px;
    box-sizing: border-box;
  }
}
</style>
